<template>
  <div class="courseItem" >
    <!--<div class="vip" v-if="courseItem.vipOnly">vip专享</div> -->
    <!-- <div class="front-class">含前置课程</div> -->
    <el-image class="img-radius" :src="courseItem.courseThumb" @click="detail" ></el-image>
    <div class="class-content">
      <p class="flex-justify" flex="main:justify"  >
        <span class="class-title text-ellipsis-single">{{
          courseItem.courseName
        }}</span>
        <span class="class-type">{{ getCourseMode() }}</span>
      </p>
      <p class="content-text text-ellipsis-single">{{ courseItem.briefDescribe }}</p>
      <p class="content-text">
        课程类型：<span>{{ courseType }} </span>
      </p>
      <div class="content-price flex-justify" flex="main:justify">
        <div>
          <span>¥ {{ price(courseItem.price) }}</span>
          <span>¥ {{  price(courseItem.discountPrice) }}</span>
        </div>

        <div class="shop-container">
          <span
            @click.stop="joinCar"
            ref="shopIcon"
            class="iconfont icon icon-gouwuche fr"
          >
          <joinCarAnimi ref="joinAnimi"  :courseId="courseItem.courseId" :src="courseItem.courseThumb"></joinCarAnimi>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" >

//import {mapGetters} from "vuex"
import router from '/@/router';
import { ref, reactive, defineProps } from "vue"

import joinCarAnimi from "/@/components/joinCarAnimi/index.vue"

import {useOptionsStore} from '/@/store/index';
const optionsStore = useOptionsStore();

let baseRadius = '10px';

export default {
  components: {
    joinCarAnimi
  },
  props: {
    courseItem: {},
    radiusArr:[]
  },
  data() {
    // console.log(radiusArr)
    // outer_radius = "";
    return {
      JoinShow: false,
      traX:0,
      traY:0,
      courseType:'',
      radius: this.radiusArr[0], //'10px 10px 10px 10px', //this.radiusArr,
      outer_radius : this.radiusArr[0],
      // vip_radius: inputProps.radius,
      img_radius: this.radiusArr[1],
    };
  },
  computed: {
  },
  mounted(){
    this.getCourseType();
  },
  methods: {
    price(price){
      if(!price)return
     
      return price.toFixed(2)
    },
    // 课程类型 直播还是录播
    getCourseMode: function () {
      if(!this.courseItem.courseMode)
        return
      //console.log(this.courseItem.courseMode)
      const type = optionsStore.getCourseMode(this.courseItem.courseMode);
      // .getCourseTypes().find(item=>item.value ===this.courseItem.courseMode)
      return type;
    },
    // 课程类型 firstCourseType-secondCourseType /// todo:
    async getCourseType(){
      let firstCourseType = {}, secondCourseType = {};
      await optionsStore.getCourseType(this.courseItem.firstTypeId).then((res) =>{
        firstCourseType = res;
      });
      await optionsStore.getSecondCourseType(this.courseItem.secondTypeId).then((res) =>{
        secondCourseType = res;
      });
      this.courseType = firstCourseType?.label + '-' + secondCourseType?.label;
    },
    async joinCar () {
      this.$refs.joinAnimi.joinCar()
            //  if(this.$store.getters.role === 'organ'){
            //   await organAddShopCar({courseId:this.courseItem.courseId})
            //  }else{
            //    await userAddShopCar({courseId:this.courseItem.courseId})
            //  }
            //   this.joinAnimation()
      },
    detail() {
      console.log(this.courseItem.courseId);
      router.push({name:"course-courseDetail",query:{courseId:this.courseItem.courseId}});
    }
  },
};
</script>

<style lang="scss" scroped>
  .shop-container {
    position: relative;
  }

  // .shop-enter-active {
  //   transition: all 4s cubic-bezier(0.49, -0.29, 0.75, 0.41);
  // }
  .flex-justify {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .courseItem {
    cursor: pointer;
    position: relative;
    border-radius: v-bind(radius);
    background-color: #fff;
    
    // margin-bottom: 20px;
  }
  .img-radius {
    width: 100%;
    height: 160px;
    border-radius: v-bind(img_radius);
  }
  .vip {
    position: absolute;
    height: 30px;
    line-height: 30px;
    left: 0;
    top: 0;
    font-size:14px;
    background-color: var(--el-color-primary);
    border-radius: v-bind(radius); //6px 0 6px 0; //
    color: #fff;
    padding: 0 6px;
    z-index: 2;
  }
  .front-class {
    position: absolute;
    height: 30px;
    line-height: 30px;
    background-color: yellow;
    right: 0;
    top: 0;
    // border-radius: 0 10px 0 10px;
    color: #fff;
    padding: 0 6px;
  }
  // .radio {
  //   color: #fff;
  //   height: 20px;
  //   line-height: 20px;
  //   position: absolute;
  //   left: 10px;
  //   top: 100px;
  //   padding: 0 10px;
  //   border-radius: 10px;
  //   background-color: rgba(0, 0, 0, 0.3);
  // }

  .class-title {
    display: inline-block;
    width: 70%;
  }
  .class-type {
    font-size: 12px;
    color: #e85900;
    display: inline-block;
    width: 50px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #e85900;
  }
  .content-text {
    font-size: 12px;
    color: #808080;
    margin-top: 6px;
  }
  .class-content {
    padding: 6px 10px;
    line-height: 25px;
  }
  .content-text span {
    color: #db7c41;
  }
  .content-price span:first-child {
    display: inline-block;
    font-size: 18px;
    color: #ff5f19;
  }
  .content-price span:nth-child(2) {
    color: #b1b1b1;
    font-size: 14px;
    margin-left: 20px;
    text-decoration: line-through;
  }
  .icon {
    font-size: 30px!important;
    color: var(--el-color-primary);
    cursor: pointer;
  }
</style>